atom-panel-container {

  // HOVER TEXT FOR EXPANDED STATE
  .project-root.expanded {
     > .header:hover:after {
       content: 'close';
     }
  }

  // PROJECT ROOT
  .project-root {
    padding-top: @top-bar;
    position: relative;
  }

  // PROJECT HEADER
  .project-root > .header {
    background: @tree-view-header-color;
    color: @tree-view-header-text-color;
    font-size: 15px;
    font-weight: 300;
    width: 100%;
    height: @top-bar;
    left: 0;
    padding: 15px 0 0 8px;
    position: absolute;
    top: 0;
    z-index: 1;

    will-change: top, position;

    &:hover {
      background: #000;
      cursor: pointer;
      transition: 0.5s ease all;

      &:after {
        color: #40525a;
        content: 'open';
        font-size: 11px;
        font-weight: 500;
        margin-left: 10px;
        position: relative;
        top: -1px;
        opacity: 0.5;
      }
    }

    &.list-item {
      &::before {
        display: none !important;
        content: '';
      }
    }

    .icon-repo {
      &::before {
        background: url('atom://seti-ui/icons/project.svg') no-repeat;
        content: '';
        height: 30px;
        margin-bottom: -10px;
        width: 30px;
      }
    }
  }

  // ANCHORED PROJECT HEADER
  .project-root.is--anchored > .header {
    position: absolute;
    top: auto; bottom: 0;
  }
}

// COMPACT MODE
atom-workspace.seti-compact {
  atom-panel-container {
    .project-root {
      padding-top: @top-bar-small;

      & > .header {
        font-size: 13px;
        height: @top-bar-small;
        padding: 7px 0 0 5px;

        .icon-repo {
          &::before {
            height: 25px;
            margin-bottom: -7px;
            width: 25px;
          }
        }
      }
    }
  }
}
